<template>
  <div>
    <div class="y-managel">
      <!-- 返回 -->
      <div class="y-managel-1">
        <div class="y-managel-back" @click="back()">返回</div>
        <div class="head-span">班组管理</div>
          <el-button class="y-btn" @click="gubi()">关闭</el-button>
          <el-button type="primary" class="y-btn1">保存</el-button>
      </div>
      <!-- 单位信息 -->
      <div class="y-nav">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
          <div class="y-managel-2">
            <div class="y-managel-2-1">单位名称：</div>

            <!-- input框 -->
            <div class="y-managel-2-2">
              <!-- 第一行 -->
              <el-row  class="y-left">
                <el-col :span="8">
                  <el-form-item prop="name">
                    <div>单位名称：</div>
                    <el-select v-model="ruleForm.name" placeholder="请选择">
                      <el-option
                        v-for="item in tableData"
                        :key="item.name"
                        :label="item.name"
                        :value="item.name"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="统一信用代码：" prop="region">
                    <el-input v-model="ruleForm.region" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="单位类型：" prop="date1">
                    <el-input v-model="ruleForm.date1" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div></div>
          </div>
          <div class="y-managel-3">
            <div class="y-managel-2-1">项目班组信息：</div>
            <!-- input框 -->
            <div class="y-managel-2-2">
              <!-- 第二行 -->
              <el-row  class="y-left">
                <el-col :span="8">
                  <el-form-item prop="date2" label="班组名称：">
                    <el-input v-model="ruleForm.date2"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="p-1">
                  <el-form-item label="入场时间：" prop="type"></el-form-item>
                  <el-date-picker
                    class="put1"
                    v-model="ruleForm.type"
                    type="date"
                    placeholder="选择日期"
                  ></el-date-picker>
                </el-col>
                <el-col :span="8" class="p-1">
                  <el-form-item label="离场时间：" prop="DanWeiName"></el-form-item>
                  <el-date-picker class="put1" v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
        <div class="y-managel-4">
          <div class="y-managel-2-1">材料管理：</div>
          <div class="y-table">
            <el-table
              :border="true"
              :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
              ref="multipleTable"
              :data="tableData"
              highlight-current-row
              tooltip-effect="dark"
              style="width: 98%, text-align: center "
              @selection-change="handleSelectionChange"
            >
              <!-- 序号 -->
              <el-table-column align="center" type="index" width="100" :index="indexFn" label="序号"></el-table-column>
              <el-table-column label="设备名称" prop="name" width="360" hight="30px" align="center"></el-table-column>
              <el-table-column label="设备编号" width="360" align="center"></el-table-column>
              <el-table-column label="操作" width="310" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleEdit(scope.$index, scope.row)">上传</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="fonter"></div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [], //总数居
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        type: "",
      },
      value: "",
      // 表单验证规则
      rules: {
        //  type: [{ validator: validateDanWeiName, trigger: 'blur' }],
        // username: [{ validator: validateusername, trigger: "blur" }],
        // Name: [{ validator: validateidcard, trigger: 'blur' }],
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
      },
      //   日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        name: "项目班组",
      });
    },
    gubi() {
      this.$router.push({
        name: "项目班组",
      });
    },
    // 表格序号
    indexFn(index) {
      index = index + 1 + (this.currPage - 1) * this.pageSize;
      return index;
    },
    //选中复选框获取下标
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      // let ids = [];
      // this.multipleSelection.map((item) => {
      //   ids.push(item.key);
      // });
      // this.selectedIDs = ids;
      // console.log("你点击的是", this.selectedIDs);
    },
  },
  //获取数据
  mounted() {
    // axios.get("../../static/data/staff.json").then((r) => {
    //   this.tableData = r.data.staffList;
    //   console.log(this.tableData);
    //   //页面挂载完成需要设置为第一页.获取并设置总数居this.setCurrList(1);
    // //   this.setCurrList(1);
    // });
  },
};
</script>
<style scoped>
.el-input >>> .el-input__inner {
  width: 260px !important;
  height: 30px;
}
.el-select >>> .el-input__inner {
  width: 260px !important;
  height: 30px;
}
.el-row {
  width: 1150px;
}
.y-left {
  margin-left: 60px;
}
.input-span {
  margin-right: 5px;
}
.add-input {
  width: 300px;
  margin-top: 15px;
  display: inline-block;
  margin-left: 10px;
}
.y-managel {
  /* margin-top: 20px; */
  /* margin-left: 20px; */
  width: 1200px;
  height: 640px;
  background: #f1f1f1;
  overflow-y: scroll;
}
.y-managel-1 {
  font-size: 17px;
  color: #787878;
  width: 1200px;
  height: 61px;
  background: white;
  display: flex;
  justify-content: left;
  align-items: center;
  position: relative;
}
.y-managel-back {
  cursor: pointer;
  margin-left: 10px;
}
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}
.y-managel-2 {
  width: 1200px;
  height: 150px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.y-managel-3 {
  width: 1200px;
  height: 160px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.y-managel-4 {
  width: 1200px;
  height: 200px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.y-managel-2-1 {
  height: 50px;
  line-height: 50px;
  /* padding-left: 20px; */
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.y-table {
  width: 95%;
  margin-top: 30px;
  margin-left: 8px;
  height: 180px;
  /* background: red; */
}
.y-managel-3-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.dang {
  margin-top: 40px;
}

.y-managel-3 {
  width: 1200px;
  height: 182px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}
.p-1 {
  position: relative;
}
.put1 {
  position: absolute;
  top: 45px;
}
.el-input__icon >>> .el-icon-date {
  line-height: 34px !important;
}
.fonter {
  width: 100%;
  height: 100px;
  background: #ffff;
  position: relative;
}
.y-btn {
  height: 30px;
  position: absolute;
  right: 100px;
  top: 10px;
  margin-top: 20px;
  margin-right: 10px;
  width: 80px;
  line-height: 0px;
}
.y-btn1 {
  height: 30px;
  position: absolute !important;
  right: 0px;
  top: 10px;
  margin-top: 20px;
  margin-right: 10px;
  width: 80px;
  line-height: 0px;
}
</style>